<template>
  <ul class="lab">
    <li v-for="(item,index) in data">
      {{item.name}}
      <span class="tip">{{item.num}}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'lab-list',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {},
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .lab {
    display: inline-table;
    padding-left: 2.2rem;
    margin-bottom: 0;
    li {
      background: #5077aa;
      color: #fff;
      float: left;
      margin-bottom: .5rem;
      margin-right: .5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      border-radius: 1rem;
      line-height: 2rem;
      .tip {
        display: block;
        float: right;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: .25rem;
        margin-left: .3rem;
        margin-right: - 0.5rem;
        border-radius: 50%;
        line-height: 1.4rem;
        text-align: center;
        background: #f44646;
        border: .1rem solid #fff;
        color: #fff;
        font-size: .8rem;
      }
    }
  }
</style>
